<template>
  <div class="detail-container">
    <div class="attr-list">
      <div class="attr-item" :class="{ full: item.attrValue && item.attrValue.length >= 14 }" v-for="(item, index) in attrs" :key="index">
        <div class="title">{{ item.attrName }}</div>
        <div class="content">{{ item.attrValue }}</div>
      </div>
    </div>
    <div v-html="dom"></div>
  </div>
</template>

<script>
export default {
  props: {
    attrs: {
      type: Array,
      default: () => []
    },
    dom: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
.detail-container {
  padding-top: 18px;
  .attr-list {
    overflow: hidden;
    .attr-item {
      border-bottom: 1px dashed #e8e8e8;
      float: left;
      font-size: 14px;
      width: 50%;
      line-height: 24px;
      padding: 8px 30px;
      .title {
        float: left;
        width: 106px;
      }
      .content {
        color: #999;
      }
      &.full {
        width: 100%;
      }
    }
  }
}
</style>
